<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title id="tie"></title>
    <!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
    <link href="./layui-v2.11.2/layui/css/layui.css" rel="stylesheet">
    <style>
        .layui-nav-item span {
            display: inline-block;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #fff;
            color: black;
            text-align: center;
            line-height: 40px;
        }

        body {
            background-image: url("https://i0.hdslb.com/bfs/new_dyn/1712437b5c7949a62f5e058e7a396ebe161775300.png@1052w_!web-dynamic.webp");
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
            background-attachment: fixed;
            margin: 0;
        }

        .layui-nav-item span:hover {
            cursor: pointer;
        }

        .layui-nav-item {
            position: absolute;
            left: 92%;
        }

        .hide {

            display: none;
        }

        .picture {
            width: 300px;
            height: 150px;
            border-radius: 30px;
            background-color: aquamarine;
            position: absolute;
            top: 30%;
            left: calc((100% - 300px)/2);
            z-index: 10;
            text-align: center;
        }

        .picture>p {
            font-size: 25px;
        }

        .picture>input {
            height: 40px;
        }

        .updata_password {
            width: 300px;
            height: 200px;
            background-color: aquamarine;
            position: absolute;
            top: 30%;
            left: calc((100% - 300px)/2);
        }

        .updata_password span {
            color: red;
        }
    </style>
</head>

<body>
    <ul class="layui-nav">

        <!-- <li class="layui-nav-item">
            
        </li> -->


        <!-- <li class="layui-nav-item">
    <a href="">小圆点<span class="layui-badge-dot"></span></a>
  </li> -->
        <li class="layui-nav-item" lay-unselect>
            <a href="javascript:;" id="user_image">
                <img src="../作业/images/年2.jpg" class="layui-nav-img">
            </a>
            <dl class="layui-nav-child">
                <dd><a href="#;" onclick="log_picture()">修改头像</a></dd>
                <dd><a href="#;" id="updata_password">修改密码</a></dd>
                <dd><a href="#;" id="log_off">注销</a></dd>
                <dd><a href="#;" id="log_exit">退出</a></dd>
                <dd><a href="#;" onclick="back_goods()">返回商品页</a></dd>
                <!-- <dd><a href="javascript:;">横线隔断</a></dd>
                <hr>
                <dd style="text-align: center;"><a href="">退出</a></dd> -->
            </dl>
        </li>
    </ul>
    <div class="picture hide">
        <p>请输入图片地址</p>
        <input type="text">
        <button onclick="u_p()">确定</button>
    </div>
    <div class="updata_password">
        旧密码:<input type="text" placeholder="请输入旧密码"><br>
        新密码:<input type="text" placeholder="请输入新密码"><br>
        <span>新旧密码不能相同,需包含字母和数字,长度5到8</span><br>
        确认新密码:<input type="text">
        <button onclick="queDing()">确定修改</button>
    </div>
    <!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
    <script src="./layui-v2.11.2/layui/layui.js"></script>
    <script>
        let user_name = JSON.parse(localStorage.getItem('userData')).userAccount;//用户名
        let user_pass = JSON.parse(localStorage.getItem('userData')).userCypher;//密码
        let inp1 = JSON.parse(localStorage.getItem('userData')).inp1;
        let inp2 = JSON.parse(localStorage.getItem('userData')).inp2;
        let user_image = document.querySelector('#user_image')//头像
        let picture = document.querySelector('.picture')//上传头像框
        let updata_password = document.querySelector('#updata_password')
        let zz = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{5,8}$/   // 正则
        // 标题
        document.querySelector(`#tie`).append(`${user_name}的个人主页`)
        // 退出
        document.querySelector(`#log_exit`).addEventListener('click', () => {
            let obj = {
                userAccount: user_name,
                userCypher: user_pass,
                inp1: inp1,
                inp2: false
            }
            localStorage.setItem('userData', JSON.stringify(obj))
            location.replace('./登录.html')
        })
        // 注销

        document.querySelector('#log_off').addEventListener('click', () => {
            let is = confirm('注销后账户中的数据无法找回,确定注销吗?')
            if (is) {
                localStorage.removeItem('userData')
                location.replace('./登录.html')
            }
        })
        // 修改头像
        function log_picture() {
            picture.classList.remove('hide')
        }
        function u_p() {
            let p_img = document.querySelector('.picture input').value;//上传头像框input
            if (p_img != '') {
                let img_ = document.createElement('img');
                let aaa = document.querySelector('#user_image img')
                img_.src = p_img;
                img_.classList.add('layui-nav-img')
                user_image.removeChild(aaa)
                user_image.append(img_)
                localStorage.setItem('userImg', JSON.stringify(p_img))
                picture.classList.add('hide')
            } else {
                alert('请输入图片地址')
            }
        }

        // 修改密码
        updata_password.addEventListener('click', () => {
            updata_password.classList.remove('hide')
        })

        // 确认修改
        function queDing() {
            let inps = document.querySelectorAll('.updata_password input')
            let iss = zz.test(inps[1].value)
            let qqq = JSON.parse(localStorage.getItem('userData'))
            if (inps[0].value != inps[1].value && iss) {
                let user_obj = {
                    userAccount: qqq.userAccount,
                    userCypher: inps[1].value,
                    inp1: false,
                    inp2: false
                }
                localStorage.setItem('userData', JSON.stringify(user_obj))
                updata_password.classList.add('hide')
                alert('修改成功,请重新登录')
            } else {
                alert('请检查旧密码是否正确,新旧密码是否冲突')
            }
        }
        // 返回商品页
        function back_goods() {
            location.assign('./商品管理.html')
        }

    </script>
</body>

</html>